<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签页（Tab）插件</title>
	<link rel="stylesheet" href="http://static.runoob.com/assets/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
	<script src="http://static.runoob.com/assets/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--
http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html
-->
<ul class="breadcrumb">

  <li><a href="/">网站首页</a> <span class="divider"></span></li>
  <li><a href="#">用户中心</a> <span class="divider" style="display:none;" id="divider2"></span></li>
  <li class="active" id="location" style="display:none;"></li>
  
</ul>    <!--面包屑导航部分-->


<script>    //JQuery控制变化的文字   （重点）
$(function(){
        
        $("#leftMenu li a").click(function(){
                
                var teshu = $(this).html() ;
                $("#location").html(teshu );
                
                if (teshu=='用户中心'){
                        $("#location,#divider2").hide();
                }else{
                        $("#location,#divider2").show();
                }
                
        });
        
});
</script>


<div class="tabbable tabs-left">
  <ul class="nav nav-tabs" id="leftMenu">
    <li class="active"><a href="#myCenter" data-toggle="tab">用户中心</a></li>
    <li><a href="#myTask" data-toggle="tab">我的课程</a></li>
    <li><a href="#tab2" data-toggle="tab">课程问题</a></li>
    <li><a href="#tab2" data-toggle="tab">我的试卷</a></li>
    <li><a href="#tab2" data-toggle="tab">我的作业</a></li>
    <li><a href="#tab2" data-toggle="tab">我的学生</a></li>
    <li><a href="#myInfo" data-toggle="tab">我的资料</a></li>
    <li><a href="#tab2" data-toggle="tab">我的好友</a></li>
    <li><a href="#loginLog" data-toggle="tab">登录历史</a></li>
    <li><a href="#tab2" data-toggle="tab">站内信</a></li>
  </ul>
  <div class="tab-content">
   
                      
    </div>

</body>
</html>